<template>
	<div class="cart">
		<h4 style="margin-top: 20px;">购车清单</h4>
		<div class="list">
			<hr style="background-color: #54cff4; height: 1px; border: none;">
			<template>
				<el-table :data="books" border style="width: 100%">
					<el-table-column prop="book.pic" label="图片" width="180">
						<template slot-scope="scope">
							<img :src="`http://127.0.0.1/api/public/showimg/${scope.row.book.pic}`"
								@click="details(scope.row.id)" />
						</template>
					</el-table-column>
					<el-table-column prop="book.name" label="商品名称" width="180">
					</el-table-column>
					<el-table-column prop="price" label="价格">
					</el-table-column>
					<el-table-column prop="num" label="数量">
						<template slot-scope="scope">
							<el-input-number v-model="scope.row.num" controls-position="right"
								@change="(value) => handleChange(scope.row.id, value)" :min="1"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column prop="sum" label="总价">
					</el-table-column>
					<el-table-column prop="isChecked" label="多选">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.isChecked" border></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="编号">
					</el-table-column>
				</el-table>
			</template>
			<div class="billing">
				<span>合计:<b>{{SumPrice}}￥</b></span>
				<el-button type="danger" @click="goPlace()">结算</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				books: [],
				bookid: 0,
				newcartList: []
			}
		},
		async mounted() {
			await this.$axios.get("/api/fore/cart/findMyCarts", this.$store.state.token).then(res => {
				this.books = res.data.data;
				this.books = this.books.map(item => {
					return {
						...item,
						isChecked: false,
						sum: item.price * item.num
					}
				})
				this.books.forEach((item, i) => {
					item.price = item.price.toFixed(2)
					item.sum = item.sum.toFixed(2)
				})
			})
		},
		computed: {
			SumPrice() {
				let sumPrice = 0;
				this.books.forEach((item, i) => {
					if (item.isChecked) {
						sumPrice += Number(item.sum)
					}
				})
				return sumPrice;
			}
		},
		methods: {
			details(bookid) {
				this.$router.push({
					path: '/pc/bookdetail/' + bookid
				});
			},
			handleChange(bookid, value) {
				this.books.forEach((item, i) => {
					if (item.id == bookid) {
						item.num = value
						item.sum = (item.price * item.num).toFixed(2)
					}
				})
			},
			goPlace(){
				this.newcartList=[];
				this.$store.state.newcartList=[];
				console.log(5)
				for(let item of this.books){
					if(item.isChecked==true){
						this.newcartList.push(item);
						this.$store.state.newcartList=this.newcartList;
						this.$router.push({
							path:'/pc/goplace'
						})
					}	
				}
			}
		}
	}
</script>

<style scoped>
	.cart {
		width: 100%;
		height: 93vh;
		display: flex;
		text-align: center;
		flex-direction: column;
	}

	.cart .list {
		width: 90%;
		height: 95%;
		margin: auto;
	}

	.cart .list table {
		width: 90%;
		height: 80%;
		margin: auto;
	}

	.cart .list table img {
		width: 100px;
		height: 100px;
	}

	.cart .list table tbody tr th {
		height: 8%;
		border: 1px solid #d4d4d4;
	}

	.cart .list table tbody tr td {
		border: 1px solid #d4d4d4;
	}

	.cart .list .billing {
		height: 50px;
		line-height: 50px;
		float: right;
	}

	.cart .list .billing b {
		margin-left: 10px;
		margin-right: 10px;
	}

	.cart .list .billing button {
		width: 200px;
	}
</style>